<script setup>
import { useNodeData, useNodeDataProps } from '../hooks/useNodeData.js'

const modelValue = defineModel()

const emit = defineEmits()
const props = defineProps({
  ...useNodeDataProps
})

const {
  nvType,
  nvValue,
  nvPath,
  nodeName,

  varDataTree,
  renderDataTree,
  variables,
  defExpandKeys,

  hasForEleNode,
  handleSelectTreePath
} = useNodeData(modelValue, props, emit)

</script>

<template>
  <div
    class="node-view-data p-2"
  >
    <div
      class="node-view-data-row mb-2"
    >
      <el-radio-group
        v-model="nvType"
        size="mini"
      ><!-- @change="handleChgNv" -->
        <el-radio-button
          label="iVar"
          v-tippy content="模块变量"
        >模块变量</el-radio-button>
        <el-radio-button
          label="var"
          v-tippy content="页面变量"
        >页面变量</el-radio-button>
        <el-radio-button
          v-if="hasForEleNode()"
          label="scope"
          v-tippy content="父级链上最近的循环节点的渲染数据"
        >渲染数据
        </el-radio-button>
      </el-radio-group>
    </div>

    <div class="node-view-data-row">
      <el-input
        v-model="nvValue"
        placeholder="下方选择绑定数据 / 自定义"
        clearable
      />
      <!-- :disabled="selectType === 'tree'" -->
    </div>
    <el-scrollbar
      class="node-view-data-tree"
    >
      <el-tree
        v-if="nvType"
        :data="renderDataTree"
        node-key="id"
        :default-expanded-keys="defExpandKeys"
        class="menu-custom-tree"
      >
        <template #default="{ node, data }">
          <div class="menu-custom-tree-node">
            <div class="menu-custom-label">
              <span
                v-text="data.label"
                class="node-prop-title"
                v-tippy content="点击复制"
                v-copy="data.label"
              />
              <span
                v-if="data.type"
                class="node-prop-type"
              >（{{ data.type }}）</span>
              <span
                v-if="data.prop && (data.prop !== data.label)"
                class="node-prop-code"> - {{ data.prop }}</span>
              <span v-text="data.path" />
            </div>
            <span
              class="node-prop-btn"
              @click.stop="handleSelectTreePath(data)"
            >选择</span>
          </div>
        </template>
      </el-tree>
    </el-scrollbar>
  </div>
</template>
